<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="./js/zepto.min.js"></script>
	</head>
	<style>
		.spone {
			display: block;
			font-size: 16px;
			font-family: "微软雅黑";
		}
		
		.stwo {
			display: block;
			font-size: 14px;
			font-family: "arial black";
			color: #2AC845;
			margin-top: 6px;
		}
		
		.mui-bar-nav {
			background: #222222;
			color: #fff;
		}
		
		.mui-title {
			color: #fff;
		}
		
		.mui-navigate-right:after,
		.mui-push-right:after {
			display: none;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">更多医院</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active">
						上海
					</a>

					<a class="mui-control-item">
						北京
					</a>
					<a class="mui-control-item">
						天津
					</a>
					<a class="mui-control-item">
						山西
					</a>
					<a class="mui-control-item">
						浙江
					</a>
					<a class="mui-control-item">
						湖南
					</a>
					<a class="mui-control-item">
						内蒙古
					</a>
					<a class="mui-control-item ">
						河北
					</a>
				</div>
			</div>
			<div class="yiyuan">
				<ul class="mui-table-view">
					<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<span class="spone">北京大学国际医院</span>
							<span class="stwo">三级甲等</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 2
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 3
						</a>
					</li>-->
					<p>点击列表加载数据</p>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			mui('.mui-scroll').on('tap','a',function(){
				var city=this.innerText
				function formatterDateTime() {
				var date = new Date()
				var month = date.getMonth() + 1
				var datetime = date.getFullYear() +
					"" // "年"
					+
					(month >= 10 ? month : "0" + month) +
					"" // "月"
					+
					(date.getDate() < 10 ? "0" + date.getDate() : date
						.getDate()) +
					"" +
					(date.getHours() < 10 ? "0" + date.getHours() : date
						.getHours()) +
					"" +
					(date.getMinutes() < 10 ? "0" + date.getMinutes() : date
						.getMinutes()) +
					"" +
					(date.getSeconds() < 10 ? "0" + date.getSeconds() : date
						.getSeconds());
				return datetime;
			}

			$.ajax({
				type: 'post',
				url: 'http://route.showapi.com/87-60',
				dataType: 'json',
				data: {
					"showapi_timestamp": formatterDateTime(),
					"showapi_appid": '75669', //这里需要改成自己的appid
					"showapi_sign": 'a5b1d85b450c443cb02376b95c12dfe8', //这里需要改成自己的应用的密钥secret
					"page": "",
					"limit": "",	
					"hosName": "",
					"provinceName": city,
					"cityName": "",
					"type": "",
					"level": ""

				},

				error: function(XmlHttpRequest, textStatus, errorThrown) {
					alert("操作失败!");
				},
				success: function(result) {
					var zhi=result.showapi_res_body.hospitalList;
					console.log(zhi)
					var str = '';
					for(var i=0;i<zhi.length;i++){
//						console.log(zhi[i].hosLink);
//						var namehos=zhi[i].hosName; //城市名称
//						var level=zhi[i].level; // 级类
//						var hoslink=zhi[i].hosLink; // 网站地址
//						$(".spone")[i].innerHTML = namehos;
//						$(".stwo")[i].innerHTML= level;
						
						
						str += `<li class="mui-table-view-cell">
						<a class="mui-navigate-right"  href="${zhi[i].hosLink}">
							<span class="spone">${zhi[i].hosName}</span>
							<span class="stwo">${zhi[i].level}</span>
						</a>
					</li>`
					}
					document.querySelector('.mui-table-view').innerHTML = str;
					
					
				}

			});
				$(".mui-table-view > li").eq(1).show()
			})
			
		</script>
	</body>

</html>